<template>
  <div>
    <p>{{ a1 }}</p>
    <p>{{ b1 }}</p>
    <p>{{ top }}</p>
    <p>{{ bottom }}</p>
    <p>{{ left }}</p>
    <p>{{ right }}</p>
    <p>{{ width }}</p>
    <p>{{ height }}</p>
    <div ref="el" :style="style" class="my-element"></div>
    <hr/>
    <p>{{ width1 }} ------ {{ height1 }}</p>
    <br/>
    <p>{{ isVisible }}</p>
    <div ref="targetElement">111111</div>
    <button @click="toggleVisibility">切换</button>
    <br/>
    <div style="padding-top: 1500px"></div>
    <p>{{ scrollTop }}</p>
    <p>{{ windowWidth }}</p>
    <P>{{ windowHeight }}</P>
  </div>
</template>

<script setup>
import {
  useDraggable,
  useElementBounding,
  useElementSize,
  useElementVisibility,
  useWindowScroll,
  useWindowSize
} from '@vueuse/core'
import { ref } from 'vue'

const el = ref(null)

// 获取元素边界
const { x: a1, y: b1, top, bottom, left, right, width, height } = useElementBounding(el)

// 拖拽
const { style } = useDraggable(el, {
  initialValue: { x: 340, y: 340 },
  onMove: (position) => {
    if (position.x < 0) {
      position.x = 0
    }
    if (position.y < 0) {
      position.y = 0
    }
  }
})

// 获取元素尺寸, 内容尺寸
const { width: width1, height: height1 } = useElementSize(el)

// 元素是否可见
const targetElement = ref(null)
const isVisible = useElementVisibility(targetElement)
const toggleVisibility = () => {
  targetElement.value.style.display =
    targetElement.value.style.display === 'none' ? 'block' : 'none'
}

//滚动条位置
const { y: scrollTop } = useWindowScroll()
// 视口高宽
const { width: windowWidth, height: windowHeight } = useWindowSize()
</script>

<style scoped>
.my-element {
  position: fixed;
  width: 200px;
  height: 200px;
  padding: 10px;
  background: cornflowerblue;
  color: #fff;
}
</style>
